<?php
if (!defined('IN_XLP')) {
    exit('Access Denied');
}
$Document = array(
    'pageid' => 'user-safe', //页面标示
    'pagename' => '', //当前页面名称
    'mycss' => array('index/common','index/style','index/user'), //加载的css样式表
    'myjs' => array('global/jquery-1.9.0.min' , 'global/layer/layer'), //加载的js脚本
    'footerjs'=>array(),
    'head'=>true//是否加载头部文件
);
include getTpl('header', 'public');
?>
<style type="text/css">
  .hide { display: none; }
</style>
<body>
<?php include getTpl('small_top' , 'public'); ?>

<div class="container">
    <!-- 头部导航条以及搜索框 -->
    <?php include getTpl('top' , 'public'); ?>
    <?php include getTpl('aside' , 'public'); ?>
    <section id="change_phone" class="vip_center" style="height: 560px !important">
        <div class="top_line">
          <span class="vip_center_text"> 手机绑定修改 </span>
        </div>
        <!-- 第一步 -->
        <div id="first_step">
          <ul class="set_phone_step">
            <li>
              <img style="width:81px; height:86px;display: inline-block;" src="<?php echo IMG_PATH ?>mobile/checkPhone_blue.png" alt="">
              <img class="bigger_point" src="<?php echo IMG_PATH ?>mobile/blue-bigger.png" alt="">
              <img class="smaller_point" src="<?php echo IMG_PATH ?>mobile/blue-bigger.png" alt="">
              <img class="smaller_point" src="<?php echo IMG_PATH ?>mobile/blue-bigger.png" alt="">
              <img class="smaller_point" src="<?php echo IMG_PATH ?>mobile/blue-bigger.png" alt="">
              <p class="step_txt first_step_txt">
                1.手机验证
              </p>
            </li>
            <li>
              <img class="smaller_point" src="<?php echo IMG_PATH ?>mobile/grey-smaller.png" alt="">
              <img class="bigger_point" src="<?php echo IMG_PATH ?>mobile/grey-bigger.png" alt="">
              <img style="width:81px; height:86px;display: inline-block;" src="<?php echo IMG_PATH ?>mobile/setNewPhone_grey.png" alt="">
              <img class="bigger_point" src="<?php echo IMG_PATH ?>mobile/grey-bigger.png" alt="">
              <img class="smaller_point" src="<?php echo IMG_PATH ?>mobile/grey-smaller.png" alt="">
              <p class="step_txt">
                2. 设置新手机
              </p>
            </li>
            <li>
              <img class="smaller_point" src="<?php echo IMG_PATH ?>mobile/grey-smaller.png" alt="">
              <img class="smaller_point" src="<?php echo IMG_PATH ?>mobile/grey-smaller.png" alt="">
              <img class="smaller_point" src="<?php echo IMG_PATH ?>mobile/grey-smaller.png" alt="">
              <img class="bigger_point" src="<?php echo IMG_PATH ?>mobile/grey-bigger.png" alt="">
              <img style="width:81px; height:86px;display: inline-block;" src="<?php echo IMG_PATH ?>mobile/setSuccess_grey.png" alt="">
              <p class="step_txt third_step_txt">
                3. 修改成功
              </p>            
            </li>
          </ul>
          <div class="input_group">
            <div class="input_row">
              <span> 已绑定手机号 </span>
              <div class="input_and_button">
                <input type="text" name="old_phone"  readonly style="width: 100%" value="<?php echo substr_replace(user::$userInfo['phone'], '****', 3, 4); ?>">
              </div>
            </div>
            <div class="input_row">
              <span> 验证码 </span>
              <div class="input_and_button">
                <input type="text" name="old_captcha"  style="width: 240px" placeholder="请输入验证码" >
                <button id="getCodeFirst" class="get_code"> 获取验证码 </button>
                <button class="get_code secondsOne hide"></button>
              </div>
            </div>
            <div class="input_row">
              <button class="next" onclick="goNextOne();"> 下一步 </button>
            </div>
          </div>
        </div>
        <!-- 第二步 -->
        <div id="second_step" style="display: none;">
          <ul class="set_phone_step">
            <li>
              <img style="width:81px; height:86px;display: inline-block;" src="<?php echo IMG_PATH ?>mobile/checkPhone_blue.png" alt="">
              <img class="bigger_point" src="<?php echo IMG_PATH ?>mobile/blue-bigger.png" alt="">
              <img class="smaller_point" src="<?php echo IMG_PATH ?>mobile/blue-smaller.png" alt="">
              <img class="smaller_point" src="<?php echo IMG_PATH ?>mobile/blue-smaller.png" alt="">
              <img class="smaller_point" src="<?php echo IMG_PATH ?>mobile/blue-smaller.png" alt="">
              <p class="step_txt first_step_txt">
                1.手机验证
              </p>
            </li>
            <li>
              <img class="smaller_point" src="<?php echo IMG_PATH ?>mobile/blue-smaller.png" alt="">
              <img class="bigger_point" src="<?php echo IMG_PATH ?>mobile/blue-bigger.png" alt="">
              <img style="width:81px; height:86px;display: inline-block;" src="<?php echo IMG_PATH ?>mobile/setNewPhone_blue.png" alt="">
              <img class="bigger_point" src="<?php echo IMG_PATH ?>mobile/blue-bigger.png" alt="">
              <img class="smaller_point" src="<?php echo IMG_PATH ?>mobile/blue-smaller.png" alt="">
              <p class="step_txt">
                2. 设置新手机
              </p>
            </li>
            <li>
              <img class="smaller_point" src="<?php echo IMG_PATH ?>mobile/grey-smaller.png" alt="">
              <img class="smaller_point" src="<?php echo IMG_PATH ?>mobile/grey-smaller.png" alt="">
              <img class="smaller_point" src="<?php echo IMG_PATH ?>mobile/grey-smaller.png" alt="">
              <img class="bigger_point" src="<?php echo IMG_PATH ?>mobile/grey-bigger.png" alt="">
              <img style="width:81px; height:86px;display: inline-block;" src="<?php echo IMG_PATH ?>mobile/setSuccess_grey.png" alt="">
              <p class="step_txt third_step_txt">
                3. 修改成功
              </p>            
            </li>
          </ul>
          <div class="input_group">
            <div class="input_row">
              <span> 新绑定手机号 </span>
              <div class="input_and_button">
                <input type="text" name="new_phone" id="new_phone" style="width: 100%" placeholder="请输入新手机号码" >
              </div>
            </div>
            <div class="input_row">
              <span> 短信验证码 </span>
              <div class="input_and_button">
                <input type="text" name="new_captcha" id="check_code_second" style="width: 240px" placeholder="请输入验证码" >
                <button id="getCodeSecond" class="get_code" > 获取验证码 </button>
                <button class="get_code secondsTwo hide"></button>
              </div>
            </div>
            <div class="input_row">
              <button class="next" onclick="goNextTwo()"> 下一步 </button>
            </div>
          </div>
        </div>
        <!-- 第三步 -->
        <div id="third_step" style="display:none">
          <ul class="set_phone_step">
            <li>
              <img style="width:81px; height:86px;display: inline-block;" src="<?php echo IMG_PATH ?>mobile/checkPhone_blue.png" alt="">
              <img class="bigger_point" src="<?php echo IMG_PATH ?>mobile/blue-bigger.png" alt="">
              <img class="smaller_point" src="<?php echo IMG_PATH ?>mobile/blue-smaller.png" alt="">
              <img class="smaller_point" src="<?php echo IMG_PATH ?>mobile/blue-smaller.png" alt="">
              <img class="smaller_point" src="<?php echo IMG_PATH ?>mobile/blue-smaller.png" alt="">
              <p class="step_txt first_step_txt">
                1.手机验证
              </p>
            </li>
            <li>
              <img class="smaller_point" src="<?php echo IMG_PATH ?>mobile/blue-smaller.png" alt="">
              <img class="bigger_point" src="<?php echo IMG_PATH ?>mobile/blue-bigger.png" alt="">
              <img style="width:81px; height:86px;display: inline-block;" src="<?php echo IMG_PATH ?>mobile/setNewPhone_blue.png" alt="">
              <img class="bigger_point" src="<?php echo IMG_PATH ?>mobile/blue-bigger.png" alt="">
              <img class="smaller_point" src="<?php echo IMG_PATH ?>mobile/blue-smaller.png" alt="">
              <p class="step_txt">
                2. 设置新手机
              </p>
            </li>
            <li>
              <img class="smaller_point" src="<?php echo IMG_PATH ?>mobile/blue-smaller.png" alt="">
              <img class="smaller_point" src="<?php echo IMG_PATH ?>mobile/blue-smaller.png" alt="">
              <img class="smaller_point" src="<?php echo IMG_PATH ?>mobile/blue-smaller.png" alt="">
              <img class="bigger_point" src="<?php echo IMG_PATH ?>mobile//blue-bigger.png" alt="">
              <img style="width:81px; height:86px;display: inline-block;" src="<?php echo IMG_PATH ?>mobile//setSuccess_blue.png" alt="">
              <p class="step_txt third_step_txt">
                3. 修改成功
              </p>            
            </li>
          </ul>
          <div class="success_row">
            <svg t="1536635072401" class="icon" style="margin-left:12px" viewBox="0 0 1043 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6308" xmlns:xlink="http://www.w3.org/1999/xlink" width="45" height="45">
              <defs>
                <style type="text/css">
                  .success{
                    fill: #31c36b;
                  }
                </style>
              </defs>
              <path class="success" d="M285.171865 513.565749c-6.262997-6.262997-18.788991-12.525994-28.183486-12.525994s-21.920489 3.131498-28.183486 12.525994c-15.657492 15.657492-15.657492 40.70948 0 56.366973l203.547401 203.5474c6.262997 6.262997 18.788991 12.525994 28.183486 12.525994 9.394495 0 21.920489-3.131498 28.183486-12.525994L939.655046 319.412844c6.262997-6.262997 12.525994-18.788991 12.525994-28.183486 0-9.394495-3.131498-21.920489-12.525994-28.183486-6.262997-6.262997-18.788991-12.525994-28.183486-12.525994s-21.920489 6.262997-28.183487 12.525994L460.53578 685.798165 285.171865 513.565749z" p-id="6309"></path>
              <path class="success" d="M1017.942508 460.330275c-3.131498-21.920489-18.788991-34.446483-40.70948-34.446483h-3.131499c-21.920489 3.131498-37.577982 21.920489-34.446483 43.840979 3.131498 15.657492 3.131498 31.314985 3.131498 46.972477 0 237.993884-194.152905 429.015291-429.01529 429.01529S81.624465 751.559633 81.624465 513.565749 272.645872 84.550459 510.639755 84.550459c84.550459 0 169.100917 25.051988 237.993884 72.024465 6.262997 3.131498 15.657492 6.262997 21.920489 6.262996 12.525994 0 25.051988-6.262997 34.446484-18.78899 6.262997-9.394495 9.394495-18.788991 6.262997-31.314985-3.131498-9.394495-9.394495-18.788991-15.657493-25.051988C711.055657 31.314985 613.979205 0 510.639755 0c-68.892966 0-134.654434 12.525994-197.284403 40.70948S197.489908 106.470948 150.517431 153.443425 65.966972 253.651376 40.914985 316.281346c-25.051988 62.629969-40.70948 128.391437-40.70948 197.284403s12.525994 134.654434 40.70948 197.284404c25.051988 59.498471 62.629969 115.865443 109.602446 162.83792s100.207951 84.550459 162.837921 109.602447c62.629969 25.051988 128.391437 40.70948 197.284403 40.70948s134.654434-12.525994 197.284404-40.70948c59.498471-25.051988 115.865443-62.629969 162.837921-109.602447s84.550459-100.207951 109.602446-162.83792c25.051988-62.629969 40.70948-128.391437 40.70948-197.284404 0-18.788991 0-37.577982-3.131498-53.235474z" p-id="6310"></path>
            </svg>
            <span class="success_txt"> 修改成功 </span>
          </div>
          <span class="congratulate"> 恭喜您手机号码修改成功，您新绑定的手机号码为 : <span id="newPhone"></span> </span>
          <button class="finish" onclick="window.location.href = '<?php echo U('user/safe') ?>'"> 完成 </button>
        </div>
      </section>
    <!-- 手机绑定修改结束 -->
</div>
<?php include getTpl('footer', 'public');  ?>
<script type="text/javascript">
$(function(){
    //发送第一个验证码
    $("#getCodeFirst").click(function(){ 
        $.post("<?php echo U('user/sendPasswordOne') ?>" , function(result){
            if(result.status) {
              setBtndisabled();
            }else{
              layer.msg(result.info);
              return false;
            }
        },"json");
    });


    //发送验证码
    $("#getCodeSecond").click(function(){
        var phone = $("#new_phone").val();
        if(!phone) {
            layer.msg('请输入您的手机号');
            return false;
        }

        var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/; 
        if(!myreg.test(phone)) { 
            layer.msg('请输入正确的手机号码'); 
            return false; 
        } 

        //检测手机号是否已被注册
        var url = "<?php echo U('user/checkPhoneRegister') ?>";
        $.post(url, {phone:phone}, function(result){
            if(result.status) {
                  sendMessage(phone);
            } else{
                layer.msg(result.info); 
                return false;
            }
        },"JSON");

    });


    /*点击改变按钮状态，已经简略掉ajax发送短信验证的代码*/  
    function sendMessage(phone) {
        var sendurl = "<?php echo U('user/sendPasswordTwo') ?>";
        $.post(sendurl , {phone : phone} , function(result){
            if(result.status) {
                // layer.msg('短信已成功发送，请注意查收');
                setBtndisabledTwo();
            }else{
                layer.msg(result.info);
                return false;
            }
        }, "JSON"); 
    }


    function setBtndisabled() {
        var btn = $(".secondsOne");
        var sendbtn = $("#getCodeFirst");  
        var count = 60;  
        var resend = setInterval(function(){  
            count--;  
            if (count > 0){ 
                btn.removeClass('hide'); 
                btn.html("重新获取("+count+")");  
                sendbtn.addClass('hide');
                // $.cookie("captcha", count, {path: '/', expires: (1/86400)*count});  
            }else {  
                clearInterval(resend); 
                sendbtn.html("获取验证码");  
                sendbtn.removeClass('hide');
                btn.addClass('hide');
            }  
        }, 1000);
    }

    function setBtndisabledTwo() {
        var btn = $(".secondsTwo");
        var sendbtn = $("#getCodeSecond");  
        var count = 60;  
        var resend = setInterval(function(){  
            count--;  
            if (count > 0){ 
                btn.removeClass('hide'); 
                btn.html("重新获取("+count+")");  
                sendbtn.addClass('hide');
                // $.cookie("captcha", count, {path: '/', expires: (1/86400)*count});  
            }else {  
                clearInterval(resend); 
                sendbtn.html("获取验证码");  
                sendbtn.removeClass('hide');
                btn.addClass('hide');
            }  
        }, 1000);
    }
});

function goNextOne() {
    var captcha = $("input[name='old_captcha']").val();
    if(!captcha) {
      layer.msg('请输入验证码');
      return false;
    }

    $.post("<?php echo U('user/checkCaptchaOne') ?>",{captcha:captcha},function(result){
      if(result.status) {
          $("#first_step").hide();
          $("#second_step").show();
      }else{
        layer.msg(result.info);
        return false;
      }
    },'json');
}

function goNextTwo() {
    var captcha = $("input[name='new_captcha']").val();
    var new_phone = $('#new_phone').val();
    if(!captcha) {
      layer.msg('请输入验证码');
      return false;
    }

    $.post("<?php echo U('user/checkCaptchaTwo') ?>",{captcha:captcha , new_phone : new_phone},function(result){
      if(result.status) {
          $("#first_step").hide();
          $("#second_step").hide();
          $("#newPhone").text(result.data);
          $("#third_step").show();
      }else{
        layer.msg(result.info);
        return false;
      }
    },'json');
}
</script>  
</body>
</html>  